<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>主页</title>
    <style>
        #app {
            width: 100%;
            height: 100%;
            position: relative;
            background: white;
            transform-origin: top left;
            display: flex;
            flex-direction: column;
        }
    </style>
</head>

<body>
    <div id="app"></div>
    <!-- 已内置判断 -->
    <!-- <script src="https://polyfill.alicdn.com/polyfill.min.js"></script> -->
    <script>
        var lastTouchEnd = 0;
        document.documentElement.addEventListener('touchend', function (event) {
            var now = Date.now();
            if (now - lastTouchEnd <= 300) {
                event.preventDefault();
            }
            lastTouchEnd = now;
        }, false);

        fnResize()
        window.onresize = function () {
            fnResize()
        }

        function fnResize() {
            var deviceWidth = document.documentElement.clientWidth || window.innerWidth
            if (deviceWidth >= 750) {
                deviceWidth = 750
            }
            if (deviceWidth <= 320) {
                deviceWidth = 320
            }
            document.documentElement.style.fontSize = (deviceWidth / 7.5 * 2) + 'px'
        }
    </script>
</body>

</html>